<template>
    <div class="base-date-picker">
        <el-form class="dataForm" label-width="100px">
            <el-form-item label="时间：">
                 <el-button-group >
                    <el-button type="danger" @click="selectDate(7)" size="mini">近一周</el-button>
                    <el-button type="success" @click="selectDate(30)" size="mini">近30日</el-button>
                    <el-button type="primary" @click="selectDate(182)" size="mini">近半年</el-button>
                    <el-button type="warning" @click="selectDate(365)" size="mini">近一年</el-button>
                </el-button-group>
                <el-date-picker
                    v-model="date"
                    type="daterange"
                    unlink-panels
                    start-placeholder="开始日期"
                    range-separator="-"
                    end-placeholder="结束日期"
                    popper-class="date-picker-1"
                    @change="chageDate"
                    >
                </el-date-picker>
               
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
/**
 * changeDate 
 */
export default {
    name:'syncOrder',
    data(){
        return{
            date:[],
        }
    },
    mounted(){
    	//默认初始化时选中一天
        this.date = []
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
        this.date.push(start)
        this.date.push(end)
        this.chageDate()
    },
    methods:{
        selectDate(num){ // 选择时间快捷键
            this.date = []
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * num);
            this.date.push(start)
            this.date.push(end)
            this.chageDate()
        },
        chageDate(){  // 日期改变时触发
            // console.log(111,this.dateFormat(this.date[0]),this.dateFormat(this.date[1]))
            this.$emit('changeDate',this.dateFormat(this.date[0]),this.dateFormat(this.date[1]))
        },
        dateFormat(dateData) {
            var date = dateData;
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return currentdate;
        }
    }
}
</script>


<style lang="less" scoped>
/* 日期外观  深色背景定制css */
.base-date-picker{
    /deep/ .el-input__inner{
        background: transparent;
        border: none;
        width: 220px; /*输入框总宽 */
        input{
            background: transparent;
            color: #02b1f6;
            width: 80px;
        }
        .el-range-separator{
            color: #02b1f6;
        }
        .el-icon-date{
            &::before{
                color: #02b1f6;
            }
        }
    }
    
}
</style>

<style lang="less">
/* 日期弹窗选择器 深色背景定制css */
.date-picker-1{
    background: #061546;
    border-color: #030a22;
    color: #eee;
    width: 600px; /*日期弹窗的宽度 */
    .popper__arrow{
        border-bottom-color: #3a64f4  !important;
        &::after{
            border-bottom-color: #3a64f4  !important;
        }
    }
    .el-picker-panel__icon-btn{
        color: #eee;
    }
    .el-date-range-picker__content.is-left{
        border-right-color: #5a8cd7;
    }
    .el-date-table{
        th{
            color: #eee;
            border-bottom-color: #5a8cd7;
        }
        td.in-range{
            div{
                background-color: #5a8cd7;
                &:hover{
                    background-color: #5a8cd7;
                }
            }
        }
    }
}
</style>
